<template>
  <div id="app">
  <mt-header fixed :title="selected" v-show="isShow" v-if="isShow_my" class="nav"></mt-header>
  
  <keep-alive>
    <router-view />
  </keep-alive>
    
  
    
<audio :src="getMusic.musicMp3Url" class="music" controls autoplay v-if="isPlay"></audio>

    <mt-tabbar v-model="selected" fixed @click.native="change()" v-show="isShow" >
      <mt-tab-item id="首页" :class="{mtItem:selected=='首页'}">
        <img slot="icon" src="../src/assets/sy1.png" v-show="selected!='首页'" />
        <img slot="icon" src="../src/assets/sy.png" v-show="selected =='首页'" />
        首页
      </mt-tab-item>
      <mt-tab-item id="分类" :class="{mtItem:selected=='分类'}">
        <img slot="icon" src="../src/assets/fl.png" v-show="selected!='分类'" />
        <img slot="icon" src="../src/assets/fl1.png" v-show="selected=='分类'" />
        分类
      </mt-tab-item>
      <mt-tab-item id="购物车" :class="['shop',{mtItem:selected=='购物车'}]">
        <mt-badge size="small" type="error" class="bd" v-show="getCount.length!=0">{{getCount.length}}</mt-badge>
        <img slot="icon" src="../src/assets/shop.png" v-show="selected!='购物车'" >
        <img slot="icon" src="../src/assets/shop1.png" v-show="selected=='购物车'" />
        购物车
      </mt-tab-item>
      <mt-tab-item id="我的">
        <img slot="icon" src="../src/assets/my.png" v-show="selected!='我的'">
        <img slot="icon" src="../src/assets/my1.png" v-show="selected=='我的'" />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      selected: "首页",
      isShow:true,
      isShow_my:true,
      isPlay:true,
    };
  },
  
  methods: {
    change() {
      sessionStorage.setItem("item", this.selected);
      if (this.selected == "首页") {
        this.$router.push("/").catch((e) => {});
      }
      if (this.selected == "分类") {
        this.$router.push("/FenLei").catch((e) => {});
      }
      if (this.selected == "购物车") {
        this.$router.push("/GouWu").catch((e) => {});
      }
      if (this.selected == "我的") {
        this.$router.push("/WoDe").catch((e) => {});
      }
    },
  },
  mounted() {
   
  },
  computed: {
    getCount(){
      return this.$store.state.list;
    },
    getMusic(){
      return this.$store.state.musicInfo;
    }
  },
  //监听属性变化
  watch: {
    // $route(path){
    //   if (path.path=="/Detail") {
    //     this.isShow=false
    //   }else{
    //     this.isShow=true
    //   }
    // }
    $route: { 
        handler (path) {
           if (path.path=="/Detail" || path.path=="/Login" || path.path=="/Register" || path.path=="/YanZheng" || path.path=="/BianJi" || path.path=="/Swipdetail") {
              this.isShow=false
            }else{
              this.isShow=true
            }
            if (path.path=="/") {
              this.selected='首页'
            }
            if (path.path=="/购物车") {
              this.selected='购物车'
            }
            if (path.path=="/WoDe") {
              this.isShow_my=false
            }else{
              this.isShow_my=true
            }
            if (path.path=="/Login" || path.path=="/Register" || path.path=="/YanZheng") {
              this.isPlay=false
            }else{
              this.isPlay=true
            }
        },
        immediate: true
    }
  },
};
</script>

<style>
  *{
    margin:0;
    padding:0;
  }
  .shop{
     position:relative
  }
  .bd{
    position:absolute;
    top: 7%;
    left: 52%;
  }
  .ve{
    margin-top: 40px;
    margin-bottom:60px;
  }
  .mtItem{
  color:red !important;
}
.music{
  position: fixed;
  bottom: 100px;
}
.nav{
  background:#FF4400
}
</style>
